<!-- 登录页面 -->
<template>
  <div>
    <div class="login-container"></div>
    <div class="login">
      <div class="login-top">
        <div class="logo"></div>
        <div class="title"><h1>攻城狮教务管理系统</h1></div>
      </div>
      <div class="form">
        <!-- 登录表单-->
        <el-form :model="form" label-width="auto" style="width: 100%">
          <el-form-item label="账号:">
            <el-input placeholder="请输入登录账号" v-model="form.account" />
          </el-form-item>
          <el-form-item label="密码:">
            <el-input
              placeholder="请输入登录密码"
              show-password
              v-model="form.password"
            />
          </el-form-item>
          <el-form-item label="角色:">
            <el-select placeholder="请选择登录角色" v-model="form.role">
              <el-option label="管理员" value="管理员" />
              <el-option label="教师" value="教师" />
              <el-option label="学生" value="学生" />
            </el-select>
          </el-form-item>
          <el-form-item label="验证码:" style="width: 70%">
            <el-input placeholder="请输入图片验证码" v-model="form.code" />
          </el-form-item>
          <div class="code">
            <img :src="code" alt="" @click="getCode" />
          </div>
          <el-form-item>
            <el-button type="primary" class="login-btn" @click="handLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { login, getCaptcha } from "@/api/login";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useRoutesStore } from "@/stores";
import { addDynamicRoutes } from "@/router";

const routesStore = useRoutesStore();
const router = useRouter();
const code = ref("");

const form = ref({
  account: undefined,
  password: undefined,
  role: undefined,
  code: undefined,
});

/**
 * @description: 初始化表单
 */
const initForm = () => {
  form.value = {
    account: undefined,
    password: undefined,
    role: undefined,
    code: undefined,
  };
};

/**
 *  @description: 处理登录
 */
const sendLogin = async () => {
  const res = await login(form.value);
  if (res.data.code == 200) {
    ElMessage({
      message: res.data.message,
      type: "success",
    });
    routesStore.setRoutes(res.data.data);
    addDynamicRoutes();
    router.push("/layout");
  } else {
    ElMessage({
      message: res.data.message,
      type: "error",
    });
    getCode();
    initForm();
  }
};

/**
 * @description: 登录
 */

const handLogin = () => {
  sendLogin();
};

/**
 * @description: 获取验证码
 */
const getCode = async () => {
  const res = await getCaptcha();
  if (res.data.code == 200) {
    code.value = res.data.data;
  }
};

onMounted(() => {
  getCode();
});
</script>

<style lang="css" scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  background: url("@/assets/imgs/login.jpeg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.login {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 400px;
  background: #fff;
  border: 1px solid #9c9c9c;
  border-radius: 5px;
  padding: 20px;
  .login-top {
    height: 55px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    .logo {
      width: 15%;
      background: url("@/assets/imgs/logo.svg") no-repeat;
      background-size: 100% 100%;
    }
    .title {
      width: 85%;
      margin-left: 50px;
      h1 {
        font-weight: 700;
      }
    }
  }
  .form {
    height: calc(100% - 55px);
    margin-top: 50px;
    .code {
      position: absolute;
      right: 20px;
      top: 270px;
      width: 25%;
      height: 10%;
    }
    .login-btn {
      width: 100%;
      margin-top: 15px;
    }
  }
}
</style>
